<template>
	<view class="zone">
		<Header title="等级奖励"></Header>
		<view class="biaota">
			<view class="iconbox">
				<image src="http://image.qxgm.site/tdz/img/tk/icon1.png" mode="widthFix" class="img1"></image>
				<view class="p1">当前等级:{{userinfo.game_level}}级</view>
				<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="receive"
					@click="open()">刷新</u-button>
			</view>
			<view class="iconbox" @click="$p.navto('/pages/index/exclusPrivilege')">
				<image src="http://image.qxgm.site/tdz/img/tk/icon2.png" mode="widthFix" class="img1"></image>
				<view class="p1">当前特权: <text v-if="userinfo.vip">{{tablist[userinfo.vip].name}}</text></view>
				<view class="receive">查看</view>
			</view>
		</view>

		<view class="main">
			<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
			<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
			<view class="box">
				<view class="type">
					<text class="n1">等级</text>
					<text class="n2">奖励(限时双倍)</text>
					<text class="n3">领取状态</text>
				</view>
				<scroll-view scroll-y class="scrolllist" @touchmove.stop>
					<view class="list">

						<block v-for="(item,index) in list" :key="index">
							<view class="item">
								<view class="p1">{{item.number}}级</view>
								<view class="p2" v-if="item.reward_type == 1">
									<image :src="item.props.img" class="img" mode="widthFix"></image>
									<view class="num">x{{item.reward}}</view>
								</view>
								<view class="p2" v-if="item.reward_type == 2">
									<image src="http://image.qxgm.site/tdz/img/tk/mg-04.png" class="img"
										mode="widthFix"></image>
									<view class="num">x{{item.reward}}</view>
								</view>
								<view class="p2" v-if="item.reward_type == 3">
									<image src="http://image.qxgm.site/tdz/img/active/3.png" class="img"
										mode="widthFix"></image>
									<view class="num">x{{item.reward}}</view>
								</view>
								<view class="p2" v-if="item.reward_type == 4">
									<image src="http://image.qxgm.site/tdz/img/tk/mg-03.png" class="img"
										mode="widthFix"></image>
									<view class="num">x{{item.reward}}</view>
								</view>
								<view class="p2" v-if="item.reward_type == 5">
									<image src="http://image.qxgm.site/tdz/img/tk/mg-01.png" class="img"
										mode="widthFix"></image>
									<view class="num">x{{item.reward}}</view>
								</view>

								<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
									v-if="item.state == 0 || item.state == 1" @click="getLingqu(item)"
									:class="[item.state==1?'receive':'receive2']">{{item.state == 0 ? '未完成' : '领取'}}</u-button>
								<image v-else class="lingqued" src="http://image.qxgm.site/tdz/img/active/9.png"
									mode="widthFix"></image>


							</view>
						</block>


					</view>
				</scroll-view>
			</view>
		</view>


		<!-- 恭喜获得 -->
		<u-mask :show="obtain" @click="obtain = false">
			<view class="warp2" @tap.stop>
				<image class="mask1" src="http://image.qxgm.site/tdz/img/youchai/mg-7.png" mode="widthFix"></image>
				<view class="mask_content2">
					<view class="m_info2">
						<view class="plist">
							<view class="parts" v-if="goods.reward_type == 1">
								<view :class="['quality'+ goods.props.quality]">
									<image class="tanimg" :src="goods.props.img" mode="widthFix">
									</image>
								</view>
								<view class="toan">
									精力丹x{{goods.reward}}
								</view>
							</view>
							<view class="parts" v-if="goods.reward_type == 2">
								<view class="sbimg">
									<image class="tanimg" src="http://image.qxgm.site/tdz/img/tk/mg-04.png"
										mode="widthFix">
									</image>
								</view>
								<view class="toan">
									铜钱x{{goods.reward}}
								</view>
							</view>
							<view class="parts" v-if="goods.reward_type == 3">
								<view class="sbimg">
									<image class="tanimg" src="http://image.qxgm.site/tdz/img/active/3.png"
										mode="widthFix">
									</image>
								</view>
								<view class="toan">
									零钱x{{goods.reward}}
								</view>
							</view>
							<view class="parts" v-if="goods.reward_type == 4">
								<view class="sbimg">
									<image class="tanimg" src="http://image.qxgm.site/tdz/img/tk/mg-03.png"
										mode="widthFix">
									</image>
								</view>
								<view class="toan">
									灵石x{{goods.reward}}
								</view>
							</view>
							<view class="parts" v-if="goods.reward_type == 5">
								<view class="sbimg">
									<image class="tanimg" src="http://image.qxgm.site/tdz/img/tk/mg-01.png"
										mode="widthFix">
									</image>
								</view>
								<view class="toan">
									神石x{{goods.reward}}
								</view>
							</view>
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="refineCon2" @click="obtain=false">确定</u-button>
					</view>
				</view>
				<image class="mask3" src="http://image.qxgm.site/tdz/img/youchai/mg-9.png" mode="widthFix"></image>
				<view class="dianjireny" @click="obtain = false">
					点击任意位置退出
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				obtain: false,
				list: [],
				goods: '',
				userinfo: {},
				tablist: [{
						id: 0,
						name: '暂无',
					},
					{
						id: 1,
						name: '超凡脱俗',
					},
					{
						id: 2,
						name: '天骄之王',
					},
					{
						id: 3,
						name: '天劫高手',
					},
					{
						id: 4,
						name: '万古仙人',
					},
					{
						id: 5,
						name: '天启圣者',
					},
					{
						id: 6,
						name: '绝对掌控',
					},
					{
						id: 7,
						name: '永恒传说',
					},
					{
						id: 8,
						name: '神界至尊',
					},
					{
						id: 9,
						name: '永恒纪元',
					},

				],
				lastClickTime: uni.getStorageSync('shuaxin'),
			};
		},
		onLoad() {
			this.taskgame()
			this.getUserInfo();
		},
		methods: {
			open() {
				const currentTime = Date.now();
				if (currentTime - this.lastClickTime >= 1800 * 1000) {
					this.getUserInfo();
					this.lastClickTime = currentTime;
					uni.setStorageSync('shuaxin', currentTime);
				} else {
					this.$u.toast('30分钟刷新一次');
				}
			},
			// 获取个人信息
			async getUserInfo() {
				let res = await this.$http.index.getUserInfo()
				if (res.code == 1) {
					this.userinfo = res.data

				}
			},
			async taskgame() {
				let res = await this.$http.index.taskgame()
				if (res.code == 1) {
					this.list = res.data.list
				}
			},
			// 领取
			async getLingqu(item) {

				if (item.state == 0 || item.state == 2) {
					this.$u.toast('等级未达到，无法领取奖励')
					return
				}

				let res = await this.$http.index.guidetaskRece({
					user_task_id: item.user_task_id
				})
				if (res.code == 1) {
					this.taskgame();
					this.goods = item
					this.obtain = true
				} else {
					this.$u.toast(res.msg)
				}

			}
		},
	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% auto;
		position: relative;
	}

	.main {
		width: 100%;
		position: relative;
		margin-top: 20px;

		.yun {
			position: absolute;
			top: -3%;
			left: 0;
			width: 44%;
			z-index: 9;
		}

		.ping1 {
			width: 100%;
			display: flex;
		}

		.box {
			position: relative;
			height: calc(100vh - 107px);
			overflow-y: scroll;
			background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
			background-size: 100% auto;
			padding: 10px 6px 0;
			border-bottom: 6px solid #b0a3a1;

			.type {
				display: flex;
				align-items: center;
				background: #e2c8d0;
				font-size: 14px;
				color: #333;
				line-height: 36px;
				background: url(http://image.qxgm.site/tdz/img/rank/mg-11.png) no-repeat;
				background-size: 100% 100%;
				margin-bottom: 3px;

				.n1 {
					display: inline-block;
					width: 20%;
					text-align: center;
				}

				.n2 {
					color: red;
				}

				.n3 {
					display: inline-block;
					margin-left: 30%;
				}
			}

			.scrolllist {
				height: calc(100vh - 152px);
				overflow-y: scroll;
			}
		}
	}

	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: url(http://image.qxgm.site/tdz/img/xianyu/mg-06.png) no-repeat;
		background-size: 100% 100%;
		padding: 18px 10px;
		box-sizing: border-box;
		margin-bottom: 5px;

		.p1 {
			width: 20%;
			text-align: center;
		}

		.p2 {
			width: 40%;
			display: flex;
			align-items: center;

			image {
				width: 25%;
			}
		}

		.receive {
			width: 70px;
			height: 30px;
			font-size: 16px;
			line-height: 30px;
			font-weight: normal;
			text-align: center;
			line-height: 37px;
			color: #fdf2c5;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/youchai/mg-04.png) no-repeat;
			background-size: 100% 100%;
		}


		.received {
			width: 70px;
			height: 30px;
			font-size: 16px;
			line-height: 30px;
			font-weight: normal;
			text-align: center;
			line-height: 37px;
			color: #fdf2c5;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/youchai/mg-04.png) no-repeat;
			background-size: 100% 100%;
			margin-right: 30px;
			filter: grayscale(100%);
		}
	}

	// #ifdef H5
	.biaota {
		position: absolute;
		right: 13px;
		top: 14px;
		z-index: 999;
	}

	// #endif


	// #ifdef APP-PLUS
	.biaota {
		position: absolute;
		right: 13px;
		top: 34px;
		z-index: 999;
	}

	// #endif


	.iconbox {
		width: 165px;
		height: 28px;
		background: url(http://image.qxgm.site/tdz/img/tk/bj1.png) no-repeat;
		background-size: 100% 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 3px;
		box-sizing: border-box;
		margin-top: 5px;

		.img1 {
			width: 16%;
		}

		.p1 {
			font-size: 10px;
			color: #ffffff;
			text-shadow: 0 1px 1px #000000;

			text {
				color: #FEEF99;
			}
		}

		.receive {
			width: 40px;
			height: 19px;
			font-size: 12px;
			line-height: 30px;
			font-weight: normal;
			text-align: center;
			line-height: 19px;
			color: #fdf2c5;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/youchai/mg-04.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.plist {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		margin-top: 14px;

		.parts {
			width: 25%;
			box-sizing: border-box;
		}

		.sbimg {
			width: 64px;
			padding: 10px 5px 3px;
			background: url(http://image.qxgm.site/tdz/img/liandan/mg-12.png) no-repeat;
			background-size: 100% 100%;
			margin: auto;
		}

		.tanimg {
			width: 100%;
		}

		.toan {
			font-size: 14px;
			font-weight: normal;
			color: #333333;
			line-height: 14px;
			margin-top: 12px;
			text-align: center;
		}

	}

	.refineCon2 {
		display: block;
		margin: 23px auto 0;
		width: 116px;
		font-size: 18px;
		height: 37px;
		font-weight: normal;
		color: #f9e5b6;
		line-height: 37px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/liandan/mg-06.png) no-repeat;
		background-size: 100% 100%;
	}

	.quality1 {
		width: 64px;
		padding: 9px 5px;
		position: relative;
		background: url(http://image.qxgm.site/tdz/img/quality/1.png) no-repeat;
		background-size: 100% 100%;
		margin: auto;
	}

	.quality2 {
		width: 64px;
		padding: 9px 5px;
		position: relative;
		background: url(http://image.qxgm.site/tdz/img/quality/2.png) no-repeat;
		background-size: 100% 100%;
		margin: auto;
	}

	.quality3 {
		width: 64px;
		padding: 9px 5px;
		position: relative;
		background: url(http://image.qxgm.site/tdz/img/quality/3.png) no-repeat;
		background-size: 100% 100%;
		margin: auto;
	}

	.quality4 {
		width: 64px;
		padding: 9px 5px;
		position: relative;
		background: url(http://image.qxgm.site/tdz/img/quality/4.png) no-repeat;
		background-size: 100% 100%;
		margin: auto;
	}

	.quality5 {
		width: 64px;
		padding: 9px 5px;
		position: relative;
		background: url(http://image.qxgm.site/tdz/img/quality/5.png) no-repeat;
		background-size: 100% 100%;
		margin: auto;
	}

	.quality6 {
		width: 64px;
		padding: 9px 5px;
		position: relative;
		background: url(http://image.qxgm.site/tdz/img/quality/6.png) no-repeat;
		background-size: 100% 100%;
		margin: auto;
	}

	.receive2 {
		display: block;
		width: 75px;
		font-size: 13px;
		height: 33px;
		font-weight: normal;
		text-align: center;
		color: #f9e5b6;
		line-height: 33px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/youchai/mg-03.png) no-repeat;
		background-size: 100% 100%;
	}


	.lingqued {
		width: 75px;
	}
</style>